@import './color.less';
body{
    background: @bodyColor;
    padding-top: 90%;
}
.shareBody{
    &-top{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 50%;
        z-index: 1;
        .topBg{
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
        p{
            margin: 10px 0;
            color: #21888d;
            text-align: center;
            img{
               width: 60px;
               height: 60px; 
               border-radius: 50%;
            }
            span{
                width: 90%;
                border: 2px solid #3bb3b9;
                display: block;
                height: 30px;
                line-height: 30px;
                margin: 10px auto;
                font-size: 12px;
                background: #fff;
                border-radius: 15px;
            }
            a{
                display: block;
                width: 60%;
                height: 40px;
                margin: 0 auto;
                background: url(../images/shareBtn.png) no-repeat center center;
                background-size: contain;
                border-radius: 50%;
            }
        }
        .shareUser{
            margin-top: 35%;
        }
        .shareBtn{
            position: absolute;
            left: 0;
            width: 100%;
        }
    }
//  规则
    .shareDetail{
        width: 94%;
        margin: 10px auto;
        position:relative;
        h1{
            width: 100%;
            height: 36px;
            font-weight: normal;
            font-size: 16px;
            text-align: center;
            margin-top: 10%;
            span{
                display: block;
                border: 1px solid #21888d;
                width: 40%;
                height: 26px;
                line-height: 26px;
                margin: 4px auto;
                position: relative;
                i{
                    display: block;
                    width: 96%;
                    height: 80%;
                    border: 1px dashed #21888d;
                    position: absolute;
                    left: 1%;
                    top: 5%;
                }
            }
            span:before{
                content: "";
                display: block;
                width: 50%;
                height: 4px;
                background: #21888d;
                position: absolute;
                left: -50%;
                top: 11px;
                background:#21888d; /* 一些不支持背景渐变的浏览器 */  
                background:-moz-linear-gradient(left,#69dce2, #21888d);  
                background:-webkit-gradient(linear, 0 50%, 100% 50%, from(#69dce2), to(#21888d));  
                background:-o-linear-gradient(left, #69dce2, #21888d); 
            }
            span:after{
                content: "";
                display: block;
                width: 50%;
                height: 4px;
                background: #21888d;
                position: absolute;
                right: -50%;
                top: 11px;
                background:#21888d; /* 一些不支持背景渐变的浏览器 */  
                background:-moz-linear-gradient(left,#21888d, #69dce2);  
                background:-webkit-gradient(linear, 0 50%, 100% 50%, from(#21888d), to(#69dce2));  
                background:-o-linear-gradient(left, #21888d, #69dce2); 
            }
        }
        p{
            font-size: 12px;
            line-height: 26px;
            text-indent: -1.5em;
            padding: 0 2em;
        }
    }
//底部背景
    &-bottom{
        position:relative;
        width: 100%;
        z-index: -100;
        img{
            position: absolute;
            left: 0;
            bottom:0;
            width: 100%;
        }
    }
}
